<div class="btn-group w-100" ngbDropdown role="group" (openChange)="dropdownOpenChange($event)" #dropdown="ngbDropdown" (keydown)="listKeyDown($event)">
  <button class="btn btn-sm" id="dropdown_{{name}}" ngbDropdownToggle [ngClass]="!editing && selectionModel.selectionSize() > 0 ? 'btn-primary' : 'btn-outline-primary'" [disabled]="disabled">
    <svg class="toolbaricon" fill="currentColor">
      <use attr.xlink:href="assets/bootstrap-icons.svg#{{icon}}" />
    </svg>
    <div class="d-none d-sm-inline">&nbsp;{{title}}</div>
    <ng-container *ngIf="!editing && selectionModel.totalCount > 0">
      <pngx-clearable-badge [number]="selectionModel.totalCount" [selected]="selectionModel.selectionSize() > 0" (cleared)="reset()"></pngx-clearable-badge>
    </ng-container>
  </button>
  <div class="dropdown-menu py-0 shadow" ngbDropdownMenu attr.aria-labelledby="dropdown_{{name}}">
    <div class="list-group list-group-flush">
      <div *ngIf="!editing && manyToOne" class="list-group-item d-flex">
        <div class="btn-group btn-group-xs flex-fill" role="group">
          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorAnd_{{name}}" name="logicalOperatorAnd_{{name}}" value="and">
          <label class="btn btn-outline-primary" for="logicalOperatorAnd_{{name}}" i18n>All</label>
          <input [(ngModel)]="selectionModel.logicalOperator" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleOperator()" type="radio" class="btn-check" id="logicalOperatorOr_{{name}}" name="logicalOperatorOr_{{name}}" value="or">
          <label class="btn btn-outline-primary" for="logicalOperatorOr_{{name}}" i18n>Any</label>
        </div>
      </div>
      <div *ngIf="!editing && !manyToOne" class="list-group-item d-flex">
        <div class="btn-group btn-group-xs flex-fill" role="group">
          <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionInclude_{{name}}" name="intersectionInclude_{{name}}" value="include">
          <label class="btn btn-outline-primary" for="intersectionInclude_{{name}}" i18n>Include</label>
          <input [(ngModel)]="selectionModel.intersection" [disabled]="!modifierToggleEnabled" (ngModelChange)="selectionModel.toggleIntersection()" type="radio" class="btn-check" id="intersectionExclude_{{name}}" name="intersectionExclude_{{name}}" value="exclude">
          <label class="btn btn-outline-primary" for="intersectionExclude_{{name}}" i18n>Exclude</label>
        </div>
      </div>
      <div class="list-group-item">
        <div class="input-group input-group-sm">
          <input class="form-control" type="text" [(ngModel)]="filterText" [placeholder]="filterPlaceholder" (keyup.enter)="listFilterEnter()" #listFilterTextInput>
        </div>
      </div>
      <div *ngIf="selectionModel.items" class="items" #buttonItems>
        <ng-container *ngFor="let item of selectionModel.itemsSorted | filter: filterText; let i = index">
          <pngx-toggleable-dropdown-button
            *ngIf="allowSelectNone || item.id" [item]="item" [hideCount]="hideCount(item)" [state]="selectionModel.get(item.id)" [count]="getUpdatedDocumentCount(item.id)" (toggle)="selectionModel.toggle(item.id)" (exclude)="excludeClicked(item.id)" (click)="setButtonItemIndex(i - 1)" [disabled]="disabled">
          </pngx-toggleable-dropdown-button>
        </ng-container>
      </div>
      <button *ngIf="editing" class="list-group-item list-group-item-action bg-light" (click)="applyClicked()" [disabled]="!modelIsDirty || disabled">
        <small class="ms-2" [ngClass]="{'fw-bold': modelIsDirty}" i18n>Apply</small>
        <svg width="1.5em" height="1em" viewBox="0 0 16 16" fill="currentColor">
          <use xlink:href="assets/bootstrap-icons.svg#arrow-right" />
        </svg>
      </button>
      <div *ngIf="!editing && manyToOne" class="list-group-item list-group-item-note pt-1 pb-2">
        <small i18n>Click again to exclude items.</small>
      </div>
    </div>
  </div>
</div>
